<script setup lang="ts">
import {ref,onMounted, computed} from 'vue';


import type { TabsInstance } from 'vant';
import PersonGate from './personGate.vue';

import carGate from '@/views/carGate.vue'
import AskLeaveQuery from './askLeaveQuery.vue';
import Dashboard from './dashboard.vue';
import { saveLog } from '@/api/queryLog';
import { useUserStore } from '@/stores';
import { PermissionValues } from '@/types';


const active  = ref('dashboard');
const userStore = useUserStore();
const tabs = ref<TabsInstance>();



onMounted(async ()=>{
  active.value = 'dashboard';
});

 

const handleTabChange = (name:string)=>{
  window.scrollTo(0,0)
  saveLog("切换tab","tab_change","name")
}

const docListStyle = computed(()=>{  
  if(active.value == 'my'){
    return {
      paddingTop:'55px'
    }
  }else{
    return []
  }
  
})

</script>

<template>
 <div class="docList" :style="docListStyle">
  
  <div class="topSpaceHolder"></div>
  
  <van-tabs ref="tabs" v-model:active="active"  :ellipsis="false" :swipeable="true"    offset-top="20px" @change="handleTabChange"    >    
    <van-tab title="首页" name="dashboard" >
      <template #title>        
          <div class="cutomeTabTitle" :class="active =='dashboard'?'active':''">首页</div>        
      </template>
      
      <div class="tabConent" >
        <Dashboard />
      </div>

    </van-tab>
    <van-tab title="待阅" name="askLeave"  v-if="userStore.hasPermission(PermissionValues.LEAVE_QUERY)">
      <template #title>        
          <div class="cutomeTabTitle" :class="active =='askLeave'?'active':''">干部请假</div>        
      </template>
      <div class="tabConent">
        <AskLeaveQuery />
      </div>
    </van-tab>
    <van-tab title="流转" name="car" v-if="userStore.hasPermission(PermissionValues.CAR_QUERY)">
      
      <template #title>        
        
          <div class="cutomeTabTitle" :class="active =='car'?'active':''">车辆查询</div>        
        
      </template>
      <div class="tabConent">
        <carGate />
      </div>
    </van-tab>
    <van-tab title="已办" name="person" v-if="userStore.hasPermission(PermissionValues.PERSON_QUERY)">
      <template #title>
          <div class="cutomeTabTitle" :class="active =='person'?'active':''">人员查询</div>
      </template>

      <div class="tabConent">
        <PersonGate v-if="active == 'person'"></PersonGate>        
        <div class="tabContentHolder" v-if="active != 'person'"></div>
      </div>
      
    </van-tab>
    
  </van-tabs>


</div>
   
</template>

<style scoped>

.docList{
  
     
    z-index: 2;
    width: 100%;
    .cutomeTabTitle{       
       font-size: 18px;       
    }

    .cutomeTabTitle.active{
      font-weight: bolder;
    }

    .tabContentHolder{
      background-color: #f2f2f2;
      min-height: 100vh;
    }
}

.tabConent{
  background-color: #f2f2f2;
  padding-top: 0px;  
}

.docTabHolder{
  height: 20px;
    background: #fff;
    position: fixed;
    top: 0;
    z-index: 4;
    width: 100%;
}
</style>
<style lang="css">
.docList .topSpaceHolder{
  height: 11px;
  position: fixed;
  width: 100%;
  background-color: #fff;
  z-index: 1;
  top:0;
}
.docList .van-tabs__wrap{
  position: fixed;
  z-index: 1;
  width: 100%;
  top:10px;  
}

.docList .tabTitleBottom{  
  position: fixed;
  width: 100%;
  z-index: 1;
  top:54px;
  background-color: #fff;
}
   
 @media screen and (min-width: 1024px) {
  
    .docList .docTab{
      width:670px !important;
        margin:auto;
        margin-left: 10px;
    }
    .docTabHolder{
      width:670px !important;
    }

    .docList .tabTitleBottom,
    .docList .van-tabs__wrap{
      width:670px !important;
    }
    
}
</style>
